<!-- 试题录入 -->
<template>
  <div class="interview-skills">
    <p class='top-title'>试题录入</p>
  <el-form :model="formData" ref="numberValidateForm" label-width="100px" class="demo-ruleForm" :rules='rules' style="margin-top:20px">
    <el-form-item label="学科：" prop="subjectID">
     <el-select v-model="formData.subjectID" placeholder="请选择" style="width:400px" @change="subj_options_change">
       <el-option v-for="item in subj_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="目录：" prop="catalogID">
     <el-select v-model="formData.catalogID" placeholder="请选择" style="width:400px">
       <el-option v-for="item in catalog_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="企业：" prop="enterpriseID">
     <el-select v-model="formData.enterpriseID" placeholder="请选择" style="width:400px">
       <el-option v-for="item in enterprise_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="城市：" prop="province">
     <el-select v-model="formData.province" placeholder="请选择" style="width:200px" @change='provincesOptChange'>
       <el-option v-for="item in provinces_Options" :key="item" :label="item" :value="item"></el-option>
     </el-select>
     <el-select v-model="formData.city" placeholder="请选择" style="width:200px">
       <el-option v-for="item in citys_Options" :key="item" :label="item" :value="item"></el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="方向：" prop="direction">
     <el-select v-model="formData.direction" placeholder="请选择" style="width:400px">
       <el-option v-for="item in direction_Options" :key="item" :label="item" :value="item"></el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="题型：" prop="questionType">
     <el-radio-group v-model="formData.questionType">
       <el-radio :label="1">单选</el-radio>
       <el-radio :label="2">多选</el-radio>
       <el-radio :label="3">简答</el-radio>
     </el-radio-group>
    </el-form-item>
    <el-form-item label="难度：" prop="difficulty">
     <el-radio-group v-model="formData.difficulty">
       <el-radio :label="1">简单</el-radio>
       <el-radio :label="2">一般</el-radio>
       <el-radio :label="3">困难</el-radio>
     </el-radio-group>
    </el-form-item>
    <el-form-item label="题干：" prop="question">
     <quillEditor v-model="formData.question" :options="editorOption" style="height:200px;margin-bottom:50px;width:99%"></quillEditor>
    </el-form-item>
    <el-form-item label="选项：">
     <el-radio-group v-model="xuanxiang" @change="radio_change_fn">
       <el-radio :label="1" style="margin:20px">
        A: <el-input v-model="formData.options[0].title" style="width:260px"></el-input>
            <i class="el-icon-circle-close" @click="formData.options[0].img=''"></i>
           <el-upload  class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess_a" :before-upload="beforeAvatarUpload">
             <img v-show="formData.options[0].img" :src="formData.options[0].img" class="avatar">
             <p v-show='!formData.options[0].img' class="img-title">上传图片</p>
           </el-upload>
       </el-radio><br/>
       <el-radio :label="2" style="margin:20px">
        B: <el-input v-model="formData.options[1].title" style="width:260px"></el-input>
            <i class="el-icon-circle-close" @click="formData.options[1].img=''"></i>
           <el-upload  class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess_b" :before-upload="beforeAvatarUpload">
             <img v-show="formData.options[1].img" :src="formData.options[1].img" class="avatar">
             <p v-show='!formData.options[1].img' class="img-title">上传图片</p>
           </el-upload>
       </el-radio><br/>
       <el-radio :label="3" style="margin:20px">
        C: <el-input v-model="formData.options[2].title" style="width:260px"></el-input>
            <i class="el-icon-circle-close" @click="formData.options[2].img=''"></i>
           <el-upload  class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess_c" :before-upload="beforeAvatarUpload">
             <img v-show='formData.options[2].img' :src="formData.options[2].img" class="avatar">
             <p v-show='!formData.options[2].img' class="img-title">上传图片</p>
           </el-upload>
       </el-radio><br/>
       <el-radio :label="4" style="margin:20px">
        D: <el-input v-model="formData.options[3].title" style="width:260px"></el-input>
            <i class="el-icon-circle-close" @click="formData.options[3].img=''"></i>
           <el-upload  class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess_d" :before-upload="beforeAvatarUpload">
             <img v-show='formData.options[3].img' :src="formData.options[3].img" class="avatar">
             <p v-show='!formData.options[3].img' class="img-title">上传图片</p>
           </el-upload>
       </el-radio><br/>
     </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" disabled>+ 增加选项与答案</el-button>
    </el-form-item>
    <el-form-item label="解析视频：">
      <el-input v-model="formData.videoURL" style="width:260px"></el-input>
    </el-form-item>
    <el-form-item label="答案解析：" prop="answer">
      <quillEditor v-model="formData.answer" :options="editorOption" style="height:200px;margin-bottom:50px;width:99%"></quillEditor>
    </el-form-item>
    <el-form-item label="题目备注：">
      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="formData.remarks" style="width:400px"></el-input>
    </el-form-item>
    <el-form-item label="试题标签：">
     <el-select v-model="thistags" multiple filterable allow-create default-first-option placeholder="请选择文章标签" style="width:400px">
     <el-option v-for="item in tags_options" :key="item.value" :label="item.label" :value="item.label"></el-option>
  </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">确认提交</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script>
import {simple as subj_simple} from '@/api/hmmm/subjects'
import {simple as dire_simple} from '@/api/hmmm/directorys'
import {list as comp_list} from '@/api/hmmm/companys'
import {simple as tags_simple} from '@/api/hmmm/tags'
import {add as tags_add, detail} from '@/api/hmmm/questions'


import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'

import {provinces,citys} from '@/api/hmmm/citys'
export default {
  async created(){
    const {data}=await subj_simple()
    console.log(data);
    this.subj_options=data

    const res=await comp_list({pagesize:10000})
    console.log(res.data.items);
    res.data.items.forEach(item=>{
      this.enterprise_options.push({value:item.id,label:item.shortName})
    })

    if(this.$route.query.id){
      const num=parseInt(this.$route.query.id)
      const res1=await detail({id:num})
    }
  },
  components:{
    quillEditor
  },
  data(){
    return{
      editorOption:{
          placeholder: '',
          modules:{
              toolbar:[
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['blockquote', 'code-block','image','link','clean']
              ]
          }
      },
      rules:{
         subjectID:[
          { required: true, message: '学科不能为空'},
         ],
         catalogID:[
          { required: true, message: '目录不能为空'},
         ],
         enterpriseID:[
          { required: true, message: '企业不能为空'},
         ],
         province:[
          { required: true, message: '城市不能为空'},
         ],
         direction:[
          { required: true, message: '方向不能为空'},
         ],
         questionType:[
          { required: true, message: '题型不能为空'},
         ],
         difficulty:[
          { required: true, message: '难度不能为空'},
         ],
         question:[
          { required: true, message: '题干不能为空'},
         ],
         answer:[
          { required: true, message: '答案解析不能为空'},
         ],
         questionType:[
          { required: true, message: '选项不能为空'},
         ],
      },
      xuanxiang:1,//选项
      thistags:[],
      formData:{
        subjectID:'',//学科
        catalogID:'',//目录
        enterpriseID:'',//企业
        province:'',
        city:'',
        direction:'',//方向
        questionType:1,//题型
        difficulty:1,//难度
        answer:'',//富文本
        tags:'',
        options:[
          {isRight: true, code: "A", title: "", img: ""},
          {isRight: false, code: "B", title: "", img: ""},
          {isRight: false, code: "C", title: "", img: ""},
          {isRight: false, code: "D", title: "", img: ""},
        ],
      },
      subj_options:[],//学科
      catalog_options:[],//目录
      enterprise_options:[],//企业
      tags_options:[],//试题标签
      provinces_Options:provinces(),//省市数据
      citys_Options:[],//城市数据
      direction_Options:['o2o','外包服务','企业服务','互联网金融','企业咨询','互联网','电子商务','其他']
    }
  },
  methods: {
    //#提交
    submitForm() {
      this.$refs['numberValidateForm'].validate(async(valid) => {
        if (valid) {
          this.formData.tags=this.thistags.join(',')
          this.formData.difficulty=toString(this.formData.difficulty)
          this.formData.questionType=toString(this.formData.questionType)
          console.log(this.formData);
          try {
            const res=await tags_add(this.formData)
            console.log(res);
            this.$router.push('/questions/list')
          } catch (error) {
            console.log(error);
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async subj_options_change(){
      const {data}=await dire_simple(this.formData.subjectID)
      this.catalog_options=data
      const res=await tags_simple(this.formData.subjectID)
      this.tags_options=res.data
    },
    radio_change_fn(){
      this.formData.options[this.xuanxiang-1].isRight=true
      console.log(this.formData);
    },
    provincesOptChange(){
      const res=citys(this.formData.province)
      this.citys_Options=res
    },
    //!图片上传
    handleAvatarSuccess_a(res, file) {
      this.formData.options[0].img = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess_b(res, file) {
      this.formData.options[1].img = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess_c(res, file) {
      this.formData.options[2].img = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess_d(res, file) {
      this.formData.options[3].img = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }
}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding-bottom: 80px;
  .avatar-uploader{
    position: absolute;
  }
  .top-title{
    padding: 20px;
    border-bottom: 1px solid #d8dce5;
  }
  ::v-deep .avatar{
    width: 100% !important;
    height: 100% !important;
  }
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    top: -46px;
    left: 320px;
    overflow: hidden;
    width: 100px;
    height: 60px;
    .img-title{
      line-height: 60px;
      color: black;
    }
    .img-title:active {
    color: #409EFF;
  }
  }
      .el-icon-circle-close{
      font-size: 18px;
      color: #999;
      transform: translate(50%,-50%);
      background: #fff;
      position: absolute;
      right: -115px;
      top: -10px;
      z-index: 20;
    }
    .el-icon-circle-close:active{
      color: #409EFF;
    }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  ::v-deep .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
